<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <title>layui</title>
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <link
            rel="stylesheet"
            th:href="@{/lib/layui-v2.6.3/css/layui.css}"
            media="all"
        />
        <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
    </head>
    <body>
        <div class="layuimini-container">
            <div class="layuimini-main">
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label"
                                        >操作类型</label
                                    >
                                    <div class="layui-input-inline">
                                        <input
                                            type="text"
                                            name="action"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label"
                                        >用户账号</label
                                    >
                                    <div class="layui-input-inline">
                                        <input
                                            type="text"
                                            name="userName"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button
                                        type="submit"
                                        class="layui-btn layui-btn-primary"
                                        lay-submit
                                        lay-filter="data-search-btn"
                                    >
                                        <i class="layui-icon"></i> 搜 索
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>

                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button
                            class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                            lay-event="add"
                        >
                            添加
                        </button>
                        <button
                            class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"
                            lay-event="delete"
                        >
                            删除
                        </button>
                    </div>
                </script>

                <table
                    class="layui-hide"
                    id="currentTableId"
                    lay-filter="currentTableFilter"
                ></table>
            </div>
        </div>
        <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
        <script th:inline="none">
            layui.use(["form", "table"], function () {
                var $ = layui.jquery,
                    form = layui.form,
                    table = layui.table;

                //模板方法
                window.createrFormat = function (o) {
                    return o;
                };

                table.render({
                    elem: "#currentTableId",
                    url: "/operateLog/list",
                    toolbar: "#toolbarDemo",
                    defaultToolbar: [
                        "filter",
                        "exports",
                        "print",
                        {
                            title: "提示",
                            layEvent: "LAYTABLE_TIPS",
                            icon: "layui-icon-tips",
                        },
                    ],
                    method: "get",
                    where: { id: "12344" },
                    parseData: function (res) {
                        // res 即为原始返回的数据
                        console.log(res);
                        return {
                            code: res.code, // 解析接口状态
                            msg: res.msg, // 解析提示文本
                            count: res.data.totalCount, // 解析数据长度
                            data: res.data.list, // 解析数据列表
                        };
                    },
                    cols: [
                        [
                            // {type: "checkbox", width: 50},
                            {
                                field: "id",
                                width: 80,
                                title: "ID",
                                sort: true,
                            },
                            {
                                field: "action",
                                width: 120,
                                title: "操作类型",
                            },
                            {
                                width: 120,
                                title: "用户id",
                                templet:
                                    "<div>{{createrFormat(d.principal.userId)}}</div>",
                            },
                            {
                                width: 120,
                                title: "用户名",
                                templet:
                                    "<div>{{createrFormat(d.principal.userName)}}</div>",
                            },
                            {
                                width: 120,
                                title: "所属机构",
                                templet:
                                    "<div>{{createrFormat(d.principal.orgId)}}</div>",
                            },
                            {
                                width: 120,
                                title: "所属机构名称",
                                templet:
                                    "<div>{{createrFormat(d.principal.orgName)}}</div>",
                            },
                            {
                                field: "operatingInstruction",
                                width: 120,
                                title: "操作说明",
                            },
                            {
                                title: "客户端ip",
                                width: 200,
                                templet:
                                    "<div>{{createrFormat(d.clientInfo.clientIp)}}</div>",
                            },
                            {
                                title: "客户端使用浏览器",
                                width: 200,
                                templet:
                                    "<div>{{createrFormat(d.clientInfo.browser)}}</div>",
                            },
                            {
                                field: "addTime",
                                title: "操作时间",
                                width: 200,
                            },
                        ],
                    ],
                    limits: [10, 15, 20, 25, 50, 100],
                    limit: 15,
                    page: true,
                    request: {
                        pageName: "pageNo", // 页码的参数名称，默认：page
                        limitName: "pageSize", // 每页数据条数的参数名，默认：limit
                    },
                    skin: "line",
                });

                // 监听搜索操作
                form.on("submit(data-search-btn)", function (data) {
                    //执行搜索重载
                    table.reload(
                        "currentTableId",
                        {
                            page: {
                                curr: 1,
                            },
                            where: data.field,
                        },
                        "data"
                    );

                    return false;
                });
            });
        </script>
    </body>
</html>
